import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  /**
   * Vite 插件配置
   * plugins: 用于扩展 Vite 功能的插件数组
   */
  plugins: [
    vue(), // Vue 3 支持插件，处理 .vue 文件
    // vueDevTools(), // Vue 开发者工具插件，提供调试功能
  ],
  
  /**
   * 开发服务器配置
   * server: 配置 Vite 开发服务器的各种选项
   */
  server: {
    /**
     * 服务器主机地址
     * host: '0.0.0.0' - 允许外部访问（局域网内其他设备可访问）
     * host: 'localhost' - 仅本机访问
     * host: true - 等同于 '0.0.0.0'
     */
    host: '0.0.0.0',
    
    /**
     * 服务器端口号
     * port: 指定开发服务器运行的端口
     * 如果端口被占用，Vite 会自动尝试下一个可用端口
     */
    port: 8081,
    
    /**
     * 自动打开浏览器
     * open: true - 启动服务器后自动在默认浏览器中打开
     * open: false - 不自动打开
     * open: '/path' - 打开指定路径
     */
    open: true,
    
    /**
     * 代理配置
     * proxy: 用于解决开发环境下的跨域问题
     * 将前端请求代理到后端服务器
     */
    proxy: {
      /**
       * API 代理规则
       * '/api': 匹配所有以 /api 开头的请求
       * 例如：前端请求 http://localhost:8081/api/user/login
       * 会被代理到 http://localhost:8080/api/user/login
       */
      '/app-api': {
        /**
         * 目标服务器地址
         * target: 后端服务器的完整地址
         * 开发环境通常是本地后端服务地址
         * 生产环境需要改为实际的后端服务器地址
         */
        target: 'http://localhost:48080',
        
        /**
         * 改变请求头中的 origin
         * changeOrigin: true - 将 host header 的 origin 改为 target URL
         * 这对于基于名称的虚拟主机或严格的 CORS 检查很有用
         * 大多数情况下应该设置为 true
         */
        changeOrigin: true,
        
        /**
         * 路径重写规则
         * rewrite: 函数，用于重写请求路径
         * 
         * 当前配置：保持 /api 前缀
         * path.replace(/^\/api/, '/api') - 将 /api 替换为 /api（实际上没有改变）
         * 
         * 常见用法：
         * 1. 保持前缀：path.replace(/^\/api/, '/api')
         * 2. 移除前缀：path.replace(/^\/api/, '')
         * 3. 替换前缀：path.replace(/^\/api/, '/v1')
         * 
         * 示例：
         * - 前端请求：/api/user/info
         * - 当前配置代理到：http://localhost:8080/api/user/info
         * - 如果移除前缀：http://localhost:8080/user/info
         */
        rewrite: (path) => path.replace(/^\/app-api/, '/app-api'), 
        // 或者如果后端没有/api前缀，使用：
        // rewrite: (path) => path.replace(/^\/api/, '')
        
        /**
         * HTTPS 相关配置
         * secure: false - 接受运行在 HTTPS 上的无效证书的后端服务器
         * 如果后端使用自签名证书或开发环境的 HTTPS，设置为 false
         * 生产环境建议设置为 true
         */
        secure: false, // 如果是https接口，需要配置这个参数
        
        /**
         * WebSocket 代理支持
         * ws: true - 启用 WebSocket 代理
         * 如果应用使用 WebSocket 连接，需要启用此选项
         * 例如：Socket.IO、原生 WebSocket 等
         */
        ws: true, // 启用websockets
        
        /**
         * 自定义代理配置函数
         * configure: 函数，接收 proxy 实例和选项
         * 可以在这里进行更高级的代理配置
         * 
         * 常见用法：
         * - 添加自定义请求头
         * - 修改请求/响应数据
         * - 添加日志记录
         * - 处理特殊的代理逻辑
         */
        configure: (proxy, options) => {
          // 可以在这里配置代理的其他选项
          // 例如：
          // proxy.on('proxyReq', (proxyReq, req, res) => {
          //   console.log('代理请求:', req.method, req.url)
          // })
          // proxy.on('proxyRes', (proxyRes, req, res) => {
          //   console.log('代理响应:', proxyRes.statusCode, req.url)
          // })
        }
      }
      
      /**
       * 可以配置多个代理规则
       * 例如：
       * '/upload': {
       *   target: 'http://localhost:8082',
       *   changeOrigin: true,
       *   rewrite: (path) => path.replace(/^\/upload/, '/file')
       * },
       * '/ws': {
       *   target: 'ws://localhost:8083',
       *   ws: true
       * }
       */
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})
